
<style type="text/css">
	.cadernoPanel .headerLeft1,
	.cadernoPanel .headerLeft2,
	.cadernoPanel .headerCenter, 
	.cadernoPanel .headerRight {
		height: 5px;
	}
	.cadernoPanel .headerLeft1,
	.cadernoPanel .espiral1 {
		width: 11px;
		background-image: url(${moduleBaseURL}papelaria/image/caderno/espiral-1.cache.gif);
		background-repeat: repeat-y;
		background-position: left top;
	}	
	.cadernoPanel .headerLeft2,
	.cadernoPanel .espiral2 {
		width: 37px;
		background-image: url(${moduleBaseURL}papelaria/image/caderno/espiral-2.cache.gif);
		background-repeat: repeat-y;
		background-position: left top;
	}
	.cadernoPanel .headerRight,
	.cadernoPanel .folheado {
		width: 5px;
	}
	.cadernoPanel .pagina .header {
		padding: 15px 0px 0px 0px;
	}
	.cadernoPanel .pagina .header .panel {
		width: 400px;
		background: white;
		border: 2px solid black;
		border-left-width: 1px;
		border-right-width: 1px;
	}
	.cadernoPanel .pagina .footer {
		height: 1px;
	}
</style>

<table class="cadernoPanel"
	   dojoAttachPoint="domElement"
	   cellpadding="0"
	   cellspacing="0"
	   border="0">
	<tr>
		<td class="borderPanel headerLeft1">
		</td>
		<td class="borderPanel headerLeft2 pagina">
		</td>
		<td class="borderPanel headerCenter pagina">
		</td>
		<td class="borderPanel headerRight pagina">
		</td>
	</tr>
	<tr>
		<td class="borderPanel espiral1"
			rowspan="2">
		</td>
		<td class="borderPanel espiral2 pagina"
			rowspan="2">
		</td>
		<td class="pagina"
			valign="top">
			
			<div class="header"
				 align="center">
				<div class="panel"
					 align="center"
					 dojoAttachPoint="headerElement">
				</div>
			</div>
			
			<div dojoAttachPoint="containerElement">
			</div>
			
		</td>
		<td class="borderPanel folheado pagina"
			rowspan="2">
		</td>
	</tr>
	<tr>
		<td class="footer pagina"
			dojoAttachPoint="footerElement">
		</td>
	</tr>
</table>